<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="80px">
      <el-form-item label="设备编码" prop="deviceCode">
        <el-input
          v-model="queryParams.deviceCode"
          placeholder="请输入设备编码"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="设备名称" prop="deviceName">
        <el-input
          v-model="queryParams.deviceName"
          placeholder="请输入设备名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="设备类型" prop="deviceType">
        <el-select v-model="queryParams.deviceType" placeholder="请选择设备类型" clearable>
          <el-option label="摄像头" value="1"/>
          <el-option label="报警器" value="2"/>
          <el-option label="传感器" value="3"/>
          <el-option label="其他" value="4"/>
        </el-select>
      </el-form-item>
      <el-form-item label="在线状态" prop="onlineStatus">
        <el-select v-model="queryParams.onlineStatus" placeholder="请选择在线状态" clearable>
          <el-option label="在线" value="1"/>
          <el-option label="离线" value="0"/>
        </el-select>
      </el-form-item>
      <el-form-item label="所属学校" prop="schoolId">
        <el-select v-model="queryParams.schoolId" placeholder="请选择学校" clearable filterable>
          <el-option
            v-for="school in schoolList"
            :key="school.schoolId"
            :label="school.schoolName"
            :value="school.schoolId"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 设备状态统计 -->
    <el-row :gutter="20" class="mb8">
      <el-col :span="6">
        <el-card class="status-card online">
          <div class="status-content">
            <div class="status-number">{{ deviceStats.onlineCount }}</div>
            <div class="status-label">在线设备</div>
          </div>
          <div class="status-icon">
            <i class="el-icon-success"></i>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="status-card offline">
          <div class="status-content">
            <div class="status-number">{{ deviceStats.offlineCount }}</div>
            <div class="status-label">离线设备</div>
          </div>
          <div class="status-icon">
            <i class="el-icon-error"></i>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="status-card fault">
          <div class="status-content">
            <div class="status-number">{{ deviceStats.faultCount }}</div>
            <div class="status-label">故障设备</div>
          </div>
          <div class="status-icon">
            <i class="el-icon-warning"></i>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="status-card maintenance">
          <div class="status-content">
            <div class="status-number">{{ deviceStats.maintenanceCount }}</div>
            <div class="status-label">维护设备</div>
          </div>
          <div class="status-icon">
            <i class="el-icon-setting"></i>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['campus:device:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['campus:device:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['campus:device:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['campus:device:export']"
        >导出</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="info"
          plain
          icon="el-icon-view"
          size="mini"
          @click="handleMap"
        >设备地图</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="deviceList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="设备编码" align="center" prop="deviceCode" width="120"/>
      <el-table-column label="设备名称" align="center" prop="deviceName" width="150" :show-overflow-tooltip="true"/>
      <el-table-column label="设备类型" align="center" prop="deviceType" width="100">
        <template slot-scope="scope">
          <el-tag :type="getDeviceTypeTagType(scope.row.deviceType)">
            {{ getDeviceTypeName(scope.row.deviceType) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="所属学校" align="center" prop="schoolName" width="150" :show-overflow-tooltip="true"/>
      <el-table-column label="安装位置" align="center" prop="locationDesc" width="150" :show-overflow-tooltip="true"/>
      <el-table-column label="IP地址" align="center" prop="ipAddress" width="120"/>
      <el-table-column label="在线状态" align="center" prop="onlineStatus" width="100">
        <template slot-scope="scope">
          <el-tag :type="scope.row.onlineStatus === 1 ? 'success' : 'danger'">
            {{ scope.row.onlineStatus === 1 ? '在线' : '离线' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="设备状态" align="center" prop="status" width="100">
        <template slot-scope="scope">
          <el-tag :type="getDeviceStatusTagType(scope.row.status)">
            {{ getDeviceStatusName(scope.row.status) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="最后心跳" align="center" prop="lastHeartbeat" width="150">
        <template slot-scope="scope">
          <span v-if="scope.row.lastHeartbeat">{{ parseTime(scope.row.lastHeartbeat, '{y}-{m}-{d} {h}:{i}') }}</span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="220">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="handleDetail(scope.row)"
            v-hasPermi="['campus:device:query']"
          >详情</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['campus:device:edit']"
          >修改</el-button>
          <el-button
            v-if="scope.row.onlineStatus === 1"
            size="mini"
            type="text"
            icon="el-icon-video-camera"
            @click="handleMonitor(scope.row)"
            v-hasPermi="['campus:device:monitor']"
          >监控</el-button>
          <el-dropdown @command="(command) => handleMoreAction(command, scope.row)">
            <span class="el-dropdown-link">
              更多<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="reboot" icon="el-icon-refresh">重启</el-dropdown-item>
              <el-dropdown-item command="maintenance" icon="el-icon-setting">维护</el-dropdown-item>
              <el-dropdown-item command="delete" icon="el-icon-delete">删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改设备对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="设备编码" prop="deviceCode">
              <el-input v-model="form.deviceCode" placeholder="请输入设备编码" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设备名称" prop="deviceName">
              <el-input v-model="form.deviceName" placeholder="请输入设备名称" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="设备类型" prop="deviceType">
              <el-select v-model="form.deviceType" placeholder="请选择设备类型" style="width: 100%">
                <el-option label="摄像头" value="1"/>
                <el-option label="报警器" value="2"/>
                <el-option label="传感器" value="3"/>
                <el-option label="其他" value="4"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设备型号" prop="deviceModel">
              <el-input v-model="form.deviceModel" placeholder="请输入设备型号" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="设备品牌" prop="deviceBrand">
              <el-input v-model="form.deviceBrand" placeholder="请输入设备品牌" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属学校" prop="schoolId">
              <el-select v-model="form.schoolId" placeholder="请选择学校" style="width: 100%" filterable>
                <el-option
                  v-for="school in schoolList"
                  :key="school.schoolId"
                  :label="school.schoolName"
                  :value="school.schoolId"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="IP地址" prop="ipAddress">
              <el-input v-model="form.ipAddress" placeholder="请输入IP地址" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="端口" prop="port">
              <el-input-number v-model="form.port" :min="1" :max="65535" style="width: 100%"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="纬度" prop="latitude">
              <el-input v-model="form.latitude" placeholder="请输入纬度" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="经度" prop="longitude">
              <el-input v-model="form.longitude" placeholder="请输入经度" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="心跳间隔" prop="heartbeatInterval">
              <el-input-number v-model="form.heartbeatInterval" :min="10" :max="3600" style="width: 100%"/>
              <span style="margin-left: 8px; color: #909399;">秒</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设备状态" prop="status">
              <el-select v-model="form.status" placeholder="请选择状态" style="width: 100%">
                <el-option label="正常" :value="1"/>
                <el-option label="故障" :value="2"/>
                <el-option label="维护中" :value="3"/>
                <el-option label="停用" :value="0"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="安装位置" prop="locationDesc">
          <el-input v-model="form.locationDesc" placeholder="请输入安装位置描述" />
        </el-form-item>
        <el-form-item label="供应商信息" prop="vendorName">
          <el-input v-model="form.vendorName" placeholder="请输入供应商名称" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入备注" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 设备详情对话框 -->
    <el-dialog title="设备详情" :visible.sync="detailOpen" width="1000px" append-to-body>
      <el-descriptions :column="2" border>
        <el-descriptions-item label="设备编码">{{ detailForm.deviceCode }}</el-descriptions-item>
        <el-descriptions-item label="设备名称">{{ detailForm.deviceName }}</el-descriptions-item>
        <el-descriptions-item label="设备类型">{{ getDeviceTypeName(detailForm.deviceType) }}</el-descriptions-item>
        <el-descriptions-item label="设备型号">{{ detailForm.deviceModel }}</el-descriptions-item>
        <el-descriptions-item label="设备品牌">{{ detailForm.deviceBrand }}</el-descriptions-item>
        <el-descriptions-item label="所属学校">{{ detailForm.schoolName }}</el-descriptions-item>
        <el-descriptions-item label="IP地址">{{ detailForm.ipAddress }}</el-descriptions-item>
        <el-descriptions-item label="端口">{{ detailForm.port }}</el-descriptions-item>
        <el-descriptions-item label="在线状态">
          <el-tag :type="detailForm.onlineStatus === 1 ? 'success' : 'danger'">
            {{ detailForm.onlineStatus === 1 ? '在线' : '离线' }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="设备状态">
          <el-tag :type="getDeviceStatusTagType(detailForm.status)">
            {{ getDeviceStatusName(detailForm.status) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="最后心跳">{{ detailForm.lastHeartbeat }}</el-descriptions-item>
        <el-descriptions-item label="心跳间隔">{{ detailForm.heartbeatInterval }}秒</el-descriptions-item>
        <el-descriptions-item label="安装位置" :span="2">{{ detailForm.locationDesc }}</el-descriptions-item>
        <el-descriptions-item label="地理位置">{{ detailForm.latitude }}, {{ detailForm.longitude }}</el-descriptions-item>
        <el-descriptions-item label="供应商">{{ detailForm.vendorName }}</el-descriptions-item>
        <el-descriptions-item label="安装日期">{{ detailForm.installDate }}</el-descriptions-item>
        <el-descriptions-item label="保修期至">{{ detailForm.warrantyExpireDate }}</el-descriptions-item>
        <el-descriptions-item label="备注" :span="2">{{ detailForm.remark }}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>

    <!-- 设备地图对话框 -->
    <el-dialog title="设备分布地图" :visible.sync="mapOpen" width="80%" append-to-body>
      <div id="deviceMapContainer" style="width: 100%; height: 500px;"></div>
    </el-dialog>

    <!-- 设备监控对话框 -->
    <el-dialog title="设备监控" :visible.sync="monitorOpen" width="80%" append-to-body>
      <div v-if="currentDevice" class="monitor-container">
        <el-row :gutter="20">
          <el-col :span="16">
            <div class="video-container">
              <video v-if="currentDevice.deviceType === '1'" controls style="width: 100%; height: 400px;">
                <source :src="getVideoUrl(currentDevice)" type="application/x-mpegURL">
                您的浏览器不支持视频播放。
              </video>
              <div v-else class="sensor-data">
                <h3>传感器数据</h3>
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-card>
                      <div class="sensor-item">
                        <div class="sensor-label">温度</div>
                        <div class="sensor-value">{{ sensorData.temperature }}°C</div>
                      </div>
                    </el-card>
                  </el-col>
                  <el-col :span="12">
                    <el-card>
                      <div class="sensor-item">
                        <div class="sensor-label">湿度</div>
                        <div class="sensor-value">{{ sensorData.humidity }}%</div>
                      </div>
                    </el-card>
                  </el-col>
                </el-row>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <el-card>
              <div slot="header">设备控制</div>
              <el-button type="primary" size="small" @click="captureSnapshot">截图</el-button>
              <el-button type="warning" size="small" @click="rebootDevice">重启设备</el-button>
              <el-button type="danger" size="small" @click="stopMonitor">停止监控</el-button>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listDevice, getDevice, delDevice, addDevice, updateDevice, exportDevice } from "@/api/campus/device";
import { listActiveSchool } from "@/api/campus/school";

export default {
  name: "Device",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 设备列表
      deviceList: [],
      // 学校列表
      schoolList: [],
      // 设备统计
      deviceStats: {
        onlineCount: 0,
        offlineCount: 0,
        faultCount: 0,
        maintenanceCount: 0
      },
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 是否显示详情弹出层
      detailOpen: false,
      // 是否显示地图弹出层
      mapOpen: false,
      // 是否显示监控弹出层
      monitorOpen: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        deviceCode: null,
        deviceName: null,
        deviceType: null,
        onlineStatus: null,
        schoolId: null
      },
      // 表单参数
      form: {},
      // 详情表单参数
      detailForm: {},
      // 当前监控设备
      currentDevice: null,
      // 传感器数据
      sensorData: {
        temperature: 25.6,
        humidity: 68
      },
      // 表单校验
      rules: {
        deviceCode: [
          { required: true, message: "设备编码不能为空", trigger: "blur" }
        ],
        deviceName: [
          { required: true, message: "设备名称不能为空", trigger: "blur" }
        ],
        deviceType: [
          { required: true, message: "设备类型不能为空", trigger: "change" }
        ],
        schoolId: [
          { required: true, message: "所属学校不能为空", trigger: "change" }
        ],
        ipAddress: [
          { pattern: /^((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)$/, message: "请输入正确的IP地址", trigger: "blur" }
        ]
      }
    };
  },
  created() {
    this.getList();
    this.getSchoolList();
    this.getDeviceStats();
  },
  methods: {
    /** 查询设备列表 */
    getList() {
      this.loading = true;
      listDevice(this.queryParams).then(response => {
        this.deviceList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 获取学校列表 */
    getSchoolList() {
      listActiveSchool().then(response => {
        this.schoolList = response.data;
      });
    },
    /** 获取设备统计 */
    getDeviceStats() {
      // 模拟统计数据
      this.deviceStats = {
        onlineCount: 125,
        offlineCount: 8,
        faultCount: 3,
        maintenanceCount: 5
      };
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        deviceId: null,
        deviceCode: null,
        deviceName: null,
        deviceType: null,
        deviceModel: null,
        deviceBrand: null,
        schoolId: null,
        ipAddress: null,
        port: 80,
        latitude: null,
        longitude: null,
        heartbeatInterval: 60,
        status: 1,
        locationDesc: null,
        vendorName: null,
        remark: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.deviceId)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加设备";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const deviceId = row.deviceId || this.ids
      getDevice(deviceId).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改设备";
      });
    },
    /** 详情按钮操作 */
    handleDetail(row) {
      const deviceId = row.deviceId;
      getDevice(deviceId).then(response => {
        this.detailForm = response.data;
        this.detailOpen = true;
      });
    },
    /** 设备地图 */
    handleMap() {
      this.mapOpen = true;
      this.$nextTick(() => {
        this.initDeviceMap();
      });
    },
    /** 设备监控 */
    handleMonitor(row) {
      this.currentDevice = row;
      this.monitorOpen = true;
    },
    /** 更多操作 */
    handleMoreAction(command, row) {
      switch(command) {
        case 'reboot':
          this.rebootDevice(row);
          break;
        case 'maintenance':
          this.setMaintenance(row);
          break;
        case 'delete':
          this.handleDelete(row);
          break;
      }
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.deviceId != null) {
            updateDevice(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addDevice(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const deviceIds = row.deviceId || this.ids;
      this.$modal.confirm('是否确认删除设备编号为"' + deviceIds + '"的数据项？').then(function() {
        return delDevice(deviceIds);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('campus/device/export', {
        ...this.queryParams
      }, `device_${new Date().getTime()}.xlsx`)
    },
    /** 重启设备 */
    rebootDevice(row) {
      this.$modal.confirm('确认要重启该设备吗？').then(() => {
        // 调用重启接口
        this.$modal.msgSuccess("重启指令已发送");
      }).catch(() => {});
    },
    /** 设置维护状态 */
    setMaintenance(row) {
      this.$modal.confirm('确认要将该设备设置为维护状态吗？').then(() => {
        // 调用维护接口
        row.status = 3;
        this.$modal.msgSuccess("已设置为维护状态");
      }).catch(() => {});
    },
    /** 截图 */
    captureSnapshot() {
      this.$modal.msgSuccess("截图已保存");
    },
    /** 停止监控 */
    stopMonitor() {
      this.monitorOpen = false;
    },
    /** 初始化设备地图 */
    initDeviceMap() {
      // 这里可以集成百度地图或高德地图
      console.log("初始化设备地图");
    },
    /** 获取视频URL */
    getVideoUrl(device) {
      return `rtmp://${device.ipAddress}:${device.port}/live`;
    },
    /** 获取设备类型名称 */
    getDeviceTypeName(type) {
      const types = {
        1: '摄像头',
        2: '报警器',
        3: '传感器',
        4: '其他'
      };
      return types[type] || '未知';
    },
    /** 获取设备类型标签类型 */
    getDeviceTypeTagType(type) {
      const types = {
        1: 'primary',
        2: 'danger',
        3: 'warning',
        4: 'info'
      };
      return types[type] || '';
    },
    /** 获取设备状态名称 */
    getDeviceStatusName(status) {
      const statuses = {
        0: '停用',
        1: '正常',
        2: '故障',
        3: '维护中'
      };
      return statuses[status] || '未知';
    },
    /** 获取设备状态标签类型 */
    getDeviceStatusTagType(status) {
      const statuses = {
        0: 'info',
        1: 'success',
        2: 'danger',
        3: 'warning'
      };
      return statuses[status] || '';
    }
  }
};
</script>

<style scoped>
.status-card {
  border: none;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
  margin-bottom: 16px;
}

.status-card .el-card__body {
  padding: 20px;
  position: relative;
  overflow: hidden;
}

.status-content {
  position: relative;
  z-index: 2;
}

.status-number {
  font-size: 32px;
  font-weight: bold;
  line-height: 1;
}

.status-label {
  font-size: 14px;
  color: #909399;
  margin-top: 8px;
}

.status-icon {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 48px;
  opacity: 0.2;
}

.status-card.online .status-number {
  color: #67C23A;
}

.status-card.online .status-icon {
  color: #67C23A;
}

.status-card.offline .status-number {
  color: #F56C6C;
}

.status-card.offline .status-icon {
  color: #F56C6C;
}

.status-card.fault .status-number {
  color: #E6A23C;
}

.status-card.fault .status-icon {
  color: #E6A23C;
}

.status-card.maintenance .status-number {
  color: #409EFF;
}

.status-card.maintenance .status-icon {
  color: #409EFF;
}

.monitor-container {
  padding: 20px;
}

.video-container {
  border: 1px solid #EBEEF5;
  border-radius: 4px;
  overflow: hidden;
}

.sensor-data {
  padding: 20px;
  text-align: center;
}

.sensor-item {
  text-align: center;
  padding: 20px;
}

.sensor-label {
  font-size: 14px;
  color: #909399;
  margin-bottom: 8px;
}

.sensor-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
}

.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}

.el-dropdown-link:hover {
  color: #66b1ff;
}
</style> 